import React, {useState, useEffect} from 'react';
import {PageHeader, Layout, Menu, Button, notification} from 'antd';
import {UserOutlined, LaptopOutlined, NotificationOutlined,RiseOutlined} from '@ant-design/icons';
import {Switch, Route} from "react-router-dom";
import User from "./pages/user";
import Role from "./pages/role";
// import UserRole from "./pages/UserRole";
import LevelSet from "./pages/levelSet";
import Workshop from "./pages/workshop";
import Line from "./pages/line"
import Box from "./pages/box";
import Gateway from "./pages/gateway";
import Dashboard from "./pages/dashboard";
import Buttons from "./pages/button";
import Status from "./pages/status";
import DashBoardRole from "./pages/setdasBoard";
import EventChat from "./pages/eventChat";
import DataReport from "./pages/dataReport";
import Home from "./pages/home";
import Event from "./pages/event";
import "./Main.less"
import common from "./common";
import Category from "./pages/Category";
import LineUser from "./pages/lineUser";
import Craft from "./pages/craft"

const {SubMenu} = Menu;
const {Header, Content, Footer, Sider} = Layout;


function Main(props) {

    let [collapsed, setCollapsed] = useState(false)
    let [user, setUser] = useState({
        name: ""
    })

    function openNotification() {
        const str = '某产线的某工艺，呼叫总管'
        speckText(str)
        notification.open({
            message: '有新消息',
            description: str,
            duration: 0,
            onClick: () => {
                speckText(str)
            },
        });
    }

    let from = (e) => {
        // props.history.push(e.key)
        props.history.push('/' + e.key)
    }
    useEffect(() => {
        if (window.localStorage.getItem("user")) {
            setUser(JSON.parse(window.localStorage.getItem("user")))
        } else {
            props.history.push('/login')
        }
        //openNotification()
    }, [])

    function logOut() {
        common.ajax("post", "/passport/token/delete").then(res => {
            common.toast("退出成功")
            props.history.push('/login')
        })

    }

    function speckText(str) {
        const url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(str);        // baidu
        const n = new Audio(url);
        n.src = url;
        n.play();
    }


    return (
        <div className="Main">
            <Layout style={{minHeight: '100vh'}}>
                <Sider collapsible={false} collapsed={collapsed} onCollapse={(collapse) => {
                    setCollapsed(collapse)
                }}>
                    <div className="logoTop">
                        安灯管理后台
                    </div>
                    <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" onClick={from}>

                        <SubMenu key="sub1" icon={<UserOutlined/>} title="用户管理">
                            <Menu.Item key="role" onClick={from}>用户组管理</Menu.Item>
                            <Menu.Item key="user" onClick={from}>用户管理</Menu.Item>
                            {/*<Menu.Item key="lineUser" onClick={from}>用户管理</Menu.Item>*/}
                        </SubMenu>

                        <SubMenu key="sub2" icon={<LaptopOutlined/>} title="设备管理">
                            {/*<Menu.Item key="dashBoardRole" onClick={from}>看板设置</Menu.Item>*/}
                            <Menu.Item key="gateway" onClick={from}>网关管理</Menu.Item>
                            <Menu.Item key="category" onClick={from}>盒子类型</Menu.Item>
                            <Menu.Item key="box" onClick={from}>按钮盒管理</Menu.Item>
                            <Menu.Item key="dashboard" onClick={from}>看板管理</Menu.Item>
                            <Menu.Item key="event" onClick={from}>报警种类</Menu.Item>
                            <Menu.Item key="levelSet" onClick={from}>报警等级</Menu.Item>
                            {/*<Menu.Item key="status" onClick={from}>状态监控</Menu.Item>*/}
                        </SubMenu>
                        <SubMenu key="sub3" icon={<NotificationOutlined/>} title="报表查询">
                            <Menu.Item key="dataReport" onClick={from}>数据报表</Menu.Item>
                            {/*<Menu.Item key="eventChat" onClick={from}>车间/产线异常报表</Menu.Item>*/}
                            <Menu.Item key="panel" onClick={from}>大屏显示</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub4" icon={<RiseOutlined />} title="生产车间">
                            <Menu.Item key="workshop" onClick={from}>车间管理</Menu.Item>
                            <Menu.Item key="line" onClick={from}>产线管理</Menu.Item>
                            <Menu.Item key="craft" onClick={from}>工艺管理</Menu.Item>
                        </SubMenu>
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{padding: 0}}>
                        <PageHeader
                            className="site-page-header"
                            title={"当前用户 " + user.name}
                            extra={[
                                <Button onClick={logOut} type="primary">退出登录</Button>,
                            ]}
                        />
                    </Header>
                    <Content style={{margin: '0 16px', padding: '16px 0'}}>
                        <Switch>
                            <Route exact path="/" component={Home}/>
                            <Route exact path="/role" component={Role}/>
                            {/*<Route exact path="/role/userRole/:id" component={UserRole}/>*/}
                            <Route path="/user" component={User}/>
                            <Route path="/workshop" component={Workshop}/>
                            <Route exact path="/line" component={Line}/>
                            <Route path="/line/:id" component={LineUser}/>
                            <Route path="/box" component={Box}/>
                            <Route path="/gateway" component={Gateway}/>
                            <Route path="/craft" component={Craft}/>
                            <Route path="/dashboard" component={Dashboard}/>
                            <Route exact path="/category" component={Category}/>
                            <Route exact path="/category/:id" component={Buttons}/>
                            <Route exact path="/status" component={Status}/>
                            <Route exact path="/dashBoardRole" component={DashBoardRole}/>
                            <Route path="/dataReport" component={DataReport}/>
                            <Route path="/eventChat" component={EventChat}/>
                            <Route path="/event" component={Event}/>
                            <Route path="/levelSet" component={LevelSet}/>
                            <Route path="/warnSet" component={EventChat}/>
                        </Switch>
                    </Content>
                    <Footer style={{textAlign: 'center'}}>Andeng</Footer>
                </Layout>
            </Layout>
        </div>

    );
}

export default Main;